<template>
    <el-card style="margin: 10px 0;height:80px">
        <el-form style="display: flex;justify-content: space-between;align-items: center;">
            <el-form-item label="角色名称">
                <el-input placeholder="角色名称" v-model="keyWord"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="searchRole">搜索</el-button>
                <el-button>重置</el-button>
            </el-form-item>
        </el-form>
    </el-card>
    <el-card>
        <el-button type="primary" icon="Plus" @click="addUser">
            添加角色
        </el-button>
        <el-table style="margin: 10px 0" border :data="roleList">
            <el-table-column label="#" type="index">

            </el-table-column>
            <el-table-column label="id" prop="id">

            </el-table-column>
            <el-table-column label="角色名称" prop="roleName">

            </el-table-column>
            <el-table-column label="创建时间" show-overflow-tooltip prop="createTime">

            </el-table-column>
            <el-table-column label="更新时间" show-overflow-tooltip prop="updateTime">

            </el-table-column>
            <el-table-column label="操作" width="280">
                <template #default="{ row }">
                    <el-button type="primary" icon="User" size="small" @click="setRoleAcl(row.id)">分配权限</el-button>
                    <el-button type="primary" icon="Edit" size="small" @click="editRole(row)">编辑</el-button>
                    <el-button type="danger" icon="Delete" size="small" @click="deleteRole(row.id)">删除</el-button>

                </template>
            </el-table-column>
        </el-table>
        <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[3, 5, 7, 9]"
            layout=" prev, pager, next, jumper,->,sizes,total " :total="total" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" />
        <el-dialog v-model="dialogFormVisible" :title="roleInfo.id ? '修改角色' : '添加角色'" width="500"
            @close="clearRoleInfo">
            <el-form>
                <el-form-item label="角色名称">
                    <el-input placeholder="请填写角色名称" v-model="roleInfo.roleName"></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取消</el-button>
                    <el-button type="primary" @click="confirmSubmit">
                        确认
                    </el-button>
                </div>
            </template>
        </el-dialog>
        <el-drawer v-model="drawer">
            <template #header>
                <h4>分配权限</h4>
            </template>
            <template #default>
                <el-tree ref="refTree" style="max-width: 600px" :data="roleAclList" show-checkbox node-key="id"
                    :default-expanded-keys="[2, 3]" :default-checked-keys="selectId" :props="defaultProps" />
            </template>
            <template #footer>
                <div style="flex: auto">
                    <el-button @click="drawer = false">取消</el-button>
                    <el-button type="primary" @click="confrimClick">确认</el-button>
                </div>
            </template>
        </el-drawer>
    </el-card>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { reqRoleList, reqAddOrUpdateRole, reqAllPermissionList, reqAssignPermission, reqDeleteRole } from '@/api/acl/role/index'
import { ElMessage } from 'element-plus';
const currentPage = ref(1)
const pageSize = ref(3)
const keyWord = ref('')
const roleList = ref([])
const total = ref(0)
const dialogFormVisible = ref(false)
const drawer = ref(false)
const roleAclList = ref([])
const refTree = ref()
const roleInfo = ref<any>({
    roleName: ''
})
const defaultProps = {
    children: 'children',
    label: 'name',
}
onMounted(() => {
    getRoleList()
})
const getRoleList = async () => {
    const res = await reqRoleList(currentPage.value, pageSize.value, keyWord.value)
    if (res.code == 200) {
        roleList.value = res.data.records
        total.value = res.data.total
    }

}
const handleSizeChange = () => {
    getRoleList()

}
const handleCurrentChange = () => {
    getRoleList()

}
const searchRole = () => {
    getRoleList()
    keyWord.value = ''
}
const addUser = () => {
    dialogFormVisible.value = true

}
const confirmSubmit = async () => {
    const res = await reqAddOrUpdateRole(roleInfo.value)
    if (res.code == 200) {
        ElMessage({
            type: "success",
            message: roleInfo.value.id ? '修改成功' : '添加成功'
        })
        dialogFormVisible.value = false
        getRoleList()
    }
}
const editRole = async (row: any) => {
    dialogFormVisible.value = true
    Object.assign(roleInfo.value, row)
}
const selectId = ref([])
const setRoleAcl = async (roleId: string) => {
    drawer.value = true
    roleInfo.value.id = roleId
    const res = await reqAllPermissionList(roleId)
    if (res.code == 200) {
        roleAclList.value = res.data
        selectId.value = defaultCheckId(roleAclList.value, [])
    }
}
const clearRoleInfo = () => {
    Object.assign(roleInfo.value, {
        roleName: '',
        id: ''
    })
}
const confrimClick = async () => {
    drawer.value = false
    let roleId = roleInfo.value.id
    const selectIdArr = refTree.value.getCheckedKeys()
    const halfChecked = refTree.value.getHalfCheckedKeys()
    const res = await reqAssignPermission(roleId, [...halfChecked, ...selectIdArr])
    if (res.code == 200) {
        ElMessage({
            type: 'success',
            message: '分配权限成功'
        })
    }
}
// const defaultCheckId=computed(()=>{
//     roleAclList.value.map(()=>{

//     })
//     return 
// })
const defaultCheckId = (roleAclList: any, initData: any) => {
    roleAclList.forEach((item: any) => {
        if (item.select && item.level == 4) {
            initData.push(item.id)
        }
        if (item.children && item.children.length > 0) {
            defaultCheckId(item.children, initData)
        }
    })
    return initData
}
const deleteRole = async (id: string) => {
    const res = await reqDeleteRole(id)
    if (res.code == 200) {
        getRoleList()
    }
}
</script>

<style lang="scss" scoped></style>